<template>
     <div>

          <el-card class="box-card" shadow="always" style="width: 80%;  margin: auto;">
               <div slot="header" class="clearfix">
                    <span style="font-size: 21px;font-family: 'element-icons';">测试表单</span>
               </div>
               <el-form ref="ruleForm" :rules="currentRules" :model="form.data" label-width="120px">
                    <fieldset>
                         <legend>新增表单</legend>
                         <form-item v-for="(column,prop) in form.columns" :column="column" :key="prop"
                              :visible="column.visible" :prop="prop" v-bind="column" v-model="form.data[prop]"
                              :formspan="20">
                         </form-item>
                    </fieldset>

                    <el-form-item class=el-form-submit>
                         <el-button type="primary" @click="submitForm()">验证</el-button>
                         <el-button @click="resetForm()">取消</el-button>
                    </el-form-item>
               </el-form>

          </el-card>
     </div>
</template>

<script>
    import formitem from '@/components/form/item'
    //     import formitem from '@/components/form/item_back'
    export default {
        components: {
            'form-item': formitem,
        },
        data() {
            return {
                currentRules: {},
                form: {
                    columns: {
                        name: {
                            componentName: 'form-input',
                            label: "学生姓名",
                            rules: 'required',
                            visible: true
                        },
                        date: {
                            componentName: "form-date-picker",
                            label: "日期",
                            datePickerType: "date",
                            rules: 'required',
                        },
                        datetime: {
                            componentName: "form-date-picker",
                            label: "时间",
                            datePickerType: "datetime",
                            rules: 'required',
                            format: "yyyy-MM-dd hh:mm:ss",
                            valueFormat: "yyyy-MM-dd hh:mm:ss",
                        },
                        datetimerange: {
                            componentName: "form-date-picker",
                            label: "时间范围",
                            datePickerType: "datetimerange",
                            rules: 'required',
                            format: "yyyy-MM-dd hh:mm:ss",
                            valueFormat: "yyyy-MM-dd hh:mm:ss",
                        },
                        phone: {
                            componentName: 'form-input',
                            label: "联系电话",
                            rules: 'required'
                        },
                        major: {
                            componentName: 'form-select',
                            label: "学生专业",
                            rules: 'required',
                            options: [{
                                label: '会计学',
                                value: "1"
                            }, {
                                label: '土木工程',
                                value: "2"
                            }],
                            _change: (val) => {
                                console.log(val)
                            }
                        },
                        address: {
                            componentName: 'form-input',
                            label: "地址",

                        },
                        sex: {
                            componentName: 'form-radio',
                            label: "性别",
                            options: [{
                                label: '男',
                                value: true
                            }, {
                                label: '女',
                                value: false
                            }]
                        },
                        desc: {
                            componentName: 'form-input',
                            type: 'textarea',
                            label: "描述"
                        },
                        desc1: {
                            componentName: 'form-editor',
                            label: "描述"
                        },

                    },
                    data: {
                        name: "汤伟",
                        sex: true
                    }
                },
            }

        },
        created() {
            this.currentRules = this.$core.formRules(this.form);
        },
        methods: {
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        alert('submit!');
                        this.form.columns.desc.visible = false;
                    } else {
                        console.log('error submit!!');
                        this.form.data.name = "未验证成功";
                        return false;
                    }
                });
            },
            resetForm() {
                this.$refs.ruleForm.resetFields();
            },
        },
        watch: {}
    }
</script>